﻿

Type.registerNamespace('AjaxControlToolkit');

//TODO: Add Client Events

AjaxControlToolkit.SideBar = function(element) {
    /// <summary>
    /// The SliderPanelBehavior is used to display a popup whenever the target is hovered over
    /// </summary>
    /// <param name="element" type="Sys.UI.DomElement" domElement="true">
    /// DOM element the behavior is associated with
    /// </param>
    AjaxControlToolkit.SideBar.initializeBase(this, [element]);

    this._panels = null;
    this._content = null; 
    this._bar = null;   
    this._caption = null;
    this._captionlabel = null;
    this._captionautohide = null;

    this._autoHide = true;
    this._cachedActivePanelIndex = -1;
    this._activePanelIndex = -1;
    
    this._unpinnedImage = null;
    this._pinnedImage = null;
    
    this._timer = null;
    
    this._loaded = false;
    this._hideDelay = 1000;
    
    this._onmouseover$delegate = Function.createDelegate(this, this._onmouseover);
    this._onmouseout$delegate = Function.createDelegate(this, this._onmouseout);
    
    this._pin_onclick$delegate = Function.createDelegate(this, this._pin_onclick);
    this._pin_onmouseover$delegate = Function.createDelegate(this, this._pin_onmouseover);
    this._pin_onmouseout$delegate = Function.createDelegate(this, this._pin_onmouseout);
    
    this._timerTick$delegate = Function.createDelegate(this, this._timerTick);
    
    this._app_onload$delegate = Function.createDelegate(this, this._app_onload);
}


AjaxControlToolkit.SideBar.prototype = {
    initialize : function() {
        /// <summary>
        /// Initialize the behavior
        /// </summary>
        AjaxControlToolkit.SideBar.callBaseMethod(this, 'initialize');
        
        var e = this.get_element();
        //e.style.height = document.documentElement.clientHeight;
        
        //get the content element
        this._bar = $get(this.get_id() + "_bar");
        this._content = $get(this.get_id() + "_content");
        
        //get the caption and create the span element
        this._caption = $get(this.get_id() + "_caption"); 
        this._captionlabel = $get(this.get_id() + "_caption_label");
        this._captionautohide = $get(this.get_id() + "_caption_autohide");

        //attach the handlers
        $addHandler(e, 'mouseover', this._onmouseover$delegate);
        $addHandler(e, 'mouseout', this._onmouseout$delegate);
        $addHandler(this._captionautohide, 'click', this._pin_onclick$delegate);
        $addHandler(this._captionautohide, 'mouseover', this._pin_onmouseover$delegate);
        $addHandler(this._captionautohide, 'mouseout', this._pin_onmouseout$delegate);
        
        Sys.Application.add_load(this._app_onload$delegate);        
        
        //assign default css classes to sidebar and content
        Sys.UI.DomElement.addCssClass(e, "ajax__sidebar_default");
        Sys.UI.DomElement.addCssClass(this._bar, "ajax__sidebar_bar");
        Sys.UI.DomElement.addCssClass(this._content, "ajax__sidebar_content");  
        Sys.UI.DomElement.addCssClass(this._caption, "ajax__sidebar_caption");
        Sys.UI.DomElement.addCssClass(this._captionautohide, "ajax__sidebar_autohide_autohide");
        
        //move both next to the form to prepare for pinned
        document.forms[0].insertBefore(e, document.forms[0].firstChild);

    }
    
    ,dispose : function() {
        /// <summary>
        /// Dispose the behavior
        /// </summary>    
        var e = this.get_element();

        //remove all handlers
        Sys.Application.remove_load(this._app_onload$delegate);
        $removeHandler(e, 'mouseover', this._onmouseover$delegate);
        $removeHandler(e, 'mouseout', this._onmouseout$delegate);
        $removeHandler(this._captionautohide, 'click', this._pin_onclick$delegate);
        $removeHandler(this._captionautohide, 'mouseover', this._pin_onmouseover$delegate);
        $removeHandler(this._captionautohide, 'mouseout', this._pin_onmouseout$delegate);
           
        this._pin_onmouseover$delegate = null;
        this._pin_onmouseout$delegate = null;                   
        this._pin_onclick$delegate = null;
        this._app_onload$delegate = null;
        this._onmouseover$delegate = null;
        this._onmouseout$delegate = null;
        this._timerTick$delegate = null;
        
        //reset all internal variables
        this._resetTimer();
        
        this._panels = null;
        this._bar = null;
        this._content = null;
        this._cachedActivePanelIndex = null;
        this._activePanelIndex = null;
        this._chachedPinned = null;
        this._autoHide = null;
        this._loaded = null;
        this._hideDelay = null;
        this._caption = null;
        this._captionlabel = null;
        this._captionautohide = null;
        
        AjaxControlToolkit.SideBar.callBaseMethod(this, 'dispose');
    }   
    
    ,_resetTimer : function() {
       /// <summary>
        /// Reset internal timer
        /// </summary>        
        if( this._timer ) {
            window.clearTimeout(this._timer);
            this._timer = null;
        }    
    }
        
    ,_onmouseout : function() {        
        this._resetTimer();
        if(!this._autoHide)return;
        this._timer = window.setTimeout(this._timerTick$delegate, this._hideDelay);
    }
    ,_onmouseover : function() {
        this._resetTimer();
        if(!this._autoHide)return;
        this._showContentPanel(true);
    }

    ,_timerTick : function(){
        this._resetTimer();
        if(!this._autoHide)return;
        this._showContentPanel(false);
    }
    
    ,_pin_onclick : function(event) {
       /// <summary>
        /// Switch automode
        /// </summary>        
        this.set_autoHide(!this.get_autoHide());
    }
    ,_pin_onmouseover :function() {
        Sys.UI.DomElement.addCssClass(this._captionautohide, "ajax__sidebar_autohide_hover");
    }
    ,_pin_onmouseout:function() {
        Sys.UI.DomElement.removeCssClass(this._captionautohide, "ajax__sidebar_autohide_hover");    
    }
    
    ,_showContentPanel : function(value) {
        /// <summary>
        /// Show/Hide the content panel
        /// </summary>  
        /// <param name="value" type="Boolean" mayBeNull="false">
        /// show/hide
        /// </param>          
        $common.setVisible(this._content, value);  
    }
    
    ,_set_position : function() {
        /// <summary>
        /// Set position for the sidebar
        /// </summary>
        var e = this.get_element();
        
        e.style.position = !this._autoHide?'static':'absolute';
        
        this._showContentPanel(!this._autoHide);
                                
        if (!this._autoHide) {  
            this._captionautohide.firstChild.src = this._pinnedImage;      
            Sys.UI.DomElement.addCssClass(this._captionautohide, "ajax__sidebar_autohide_static");
            Sys.UI.DomElement.removeCssClass(this._captionautohide, "ajax__sidebar_autohide_autohide");
        } else {    
            this._captionautohide.firstChild.src = this._unpinnedImage;
            Sys.UI.DomElement.addCssClass(this._captionautohide, "ajax__sidebar_autohide_autohide");
            Sys.UI.DomElement.removeCssClass(this._captionautohide, "ajax__sidebar_autohide_static");
        }
    }
        
    ,get_panels : function() { 
        /// <value type="Array" maybeNull="false">
        /// Get the panels for the sidebar.
        /// </value>       
        if (this._panels == null) {
            this._panels = [];
        }
        return this._panels; 
    }
    
    ,get_autoHide : function() {
        /// <value type="Boolean" maybeNull="true">
        /// Gets if sidebar is in autohide mode.
        /// </value>       
        return this._autoHide;
    }
    ,set_autoHide : function(value) {
        if (value != this._autoHide) {
            this._autoHide = value;
            if (this.get_isInitialized()) {
                this._set_position();
                if (this._loaded) {
                    this.raiseAutoHideChanged();
                }                  
            }
            this.raisePropertyChanged("pinned");
        }  
    }
    
    ,get_hideDelay : function() {
        /// <value type="Number" maybeNull="true">
        /// Gets the milliseconds delay before the content panel is hidden.
        /// </value>      
        return this._hideDelay;
    }
    ,set_hideDelay : function(value) {
        if (value != this._hideDelay) {
            this._hideDelay = value;
            this.raisePropertyChanged("enabled");
        }
    } 

    ,get_unpinnedImage : function() {
        /// <value type="String" maybeNull="true">
        /// Gets the url for the unpinned image.
        /// </value>          
        return this._unpinnedImage;
    }
    ,set_unpinnedImage : function(value) {   
        if (value != this._unpinnedImage) {
            this._unpinnedImage = value;
            this.raisePropertyChanged("unpinnedImage");
        }
    } 
    
    ,get_pinnedImage : function() {
        /// <value type="String" maybeNull="true">
        /// Gets the url for the pinned image.
        /// </value>        
        return this._pinnedImage;
    }
    ,set_pinnedImage : function(value) {
        if (value != this._pinnedImage) {
            this._pinnedImage = value;
            this.raisePropertyChanged("pinnedImage");
        }
    }     
    
    ,get_activePanelIndex : function() { 
        /// <value type="Number" maybeNull="true">
        /// Gets the index of the current panel.
        /// </value>        
        if (this._cachedActivePanelIndex > -1) {
            return this._cachedActivePanelIndex;
        }    
        return this._activePanelIndex; 
    }
    ,set_activePanelIndex : function(value) {   
        if (!this.get_isInitialized()) {
            this._cachedActivePanelIndex = value;
        } else {
            if (value < -1 || value >= this.get_panels().length) {
                throw Error.argumentOutOfRange("value");
            }
            if (this._activePanelIndex != -1) {
                this.get_panels()[this._activePanelIndex]._set_active(false);
            }
            this._activePanelIndex = value;
            if (this._activePanelIndex != -1) {
                this.get_panels()[this._activePanelIndex]._set_active(true);
                this._captionlabel.innerHTML = this.get_panels()[this._activePanelIndex].get_panelText();
            }
            if (this._loaded) {
                this.raiseActivePanelChanged();
            }            
            if (value != this._activePanelIndex) this.raisePropertyChanged("activePanelIndex");
        }
    }
    
    ,get_activePanel : function() {
        /// <value type="AjaxControlToolkit.SidePanel" maybeNull="true">
        /// Gets the current panel.
        /// </value>      
        if (this._activePanelIndex > -1) {
            return this.get_panels()[this._activePanelIndex];
        }
        return null;
    }
    ,set_activePanel : function(value) {
        var i = Array.indexOf(this.get_panels(), value);
        if (i == -1) {
            throw Error.argument("value", "Out of range!");
        }
        this.set_activePanelIndex(i);
    } 
    
    ,saveClientState : function() {    
        var state = {
            ActivePanelIndex:this._activePanelIndex,
            AutoHide:this._autoHide
        };
        return Sys.Serialization.JavaScriptSerializer.serialize(state);
    }  
    ,_app_onload : function(sender, e) {
        if (this._cachedActivePanelIndex != -1) {
            this.set_activePanelIndex(this._cachedActivePanelIndex);
            this._cachedActivePanelIndex = -1;
        }        
        this._set_position();        
        this._loaded = true;
    }  
    
    ,add_activePanelChanged : function(handler) {
        /// <summary>
        /// Add an event handler for the panel changed
        /// </summary>
        /// <param name="handler" type="Function" mayBeNull="false">
        /// Event handler
        /// </param>
        /// <returns />        
        this.get_events().addHandler("activePanelChanged", handler);
    }
    ,remove_activePanelChanged : function(handler) {
        /// <summary>
        /// Remove the event handler for the panel changed 
        /// </summary>
        /// <param name="handler" type="Function" mayBeNull="false">
        /// Event handler
        /// </param>
        /// <returns />       
        this.get_events().removeHandler("activePanelChanged", handler);
    }
    ,raiseActivePanelChanged : function() {
        /// <summary>
        /// Raise the panel changed event
        /// </summary>
        /// <param name="eventArgs" type="Sys.CancelEventArgs" mayBeNull="false">
        /// Event arguments for the panel changed event
        /// </param>
        /// <returns /> 
        var eh = this.get_events().getHandler("activePanelChanged");
        if (eh) {
            eh(this, Sys.EventArgs.Empty);
        }
    }
    ,add_autoHideChanged : function(handler) {
        /// <summary>
        /// Add an event handler for the autohide mode changed
        /// </summary>
        /// <param name="handler" type="Function" mayBeNull="false">
        /// Event handler
        /// </param>
        /// <returns />        
        this.get_events().addHandler("autoHideChanged", handler);
    }
    ,remove_autoHideChanged : function(handler) {
        /// <summary>
        /// Remove the event handler for the autohide mode changed 
        /// </summary>
        /// <param name="handler" type="Function" mayBeNull="false">
        /// Event handler
        /// </param>
        /// <returns />     
        this.get_events().removeHandler("autoHideChanged", handler);
    }
    ,raiseAutoHideChanged : function() {
        /// <summary>
        /// Raise the autohide mode changed event
        /// </summary>
        /// <param name="eventArgs" type="Sys.CancelEventArgs" mayBeNull="false">
        /// Event arguments for the autohide mode changed event
        /// </param>
        /// <returns />     
        var eh = this.get_events().getHandler("autoHideChanged");
        if (eh) {
            eh(this, Sys.EventArgs.Empty);
        }
    }          
}    

AjaxControlToolkit.SideBar.registerClass('AjaxControlToolkit.SideBar', AjaxControlToolkit.ControlBase);


///     
AjaxControlToolkit.SidePanel = function(element) {
    /// <summary>
    /// The SliderPanelBehavior is used to display a popup whenever the target is hovered over
    /// </summary>
    /// <param name="element" type="Sys.UI.DomElement" domElement="true">
    /// DOM element the behavior is associated with
    /// </param>
    AjaxControlToolkit.SidePanel.initializeBase(this, [element]);

    this._owner = null;
    this._index = null;
    this._active = null;
    this._button = null;
    this._enabled = true;
    this._panelText = null;
    
    this._button_onclick$delegate = Function.createDelegate(this, this._button_onclick);

}


AjaxControlToolkit.SidePanel.prototype = {
    initialize : function() {
        /// <summary>
        /// Initialize the behavior
        /// </summary>
        AjaxControlToolkit.SidePanel.callBaseMethod(this, 'initialize');

        var e = this.get_element();
        
        var owner = this.get_owner();
        if (!owner) {
            throw Error.invalidOperation("Owner unset!");
        }
        
        this._index = owner.get_panels().length;
        Array.add(owner.get_panels(), this);
             
        //assign css classes
        Sys.UI.DomElement.addCssClass(e, "ajax__sidebar_panel");
        Sys.UI.DomElement.addCssClass(this._button, "ajax__sidebar_button"); 
                        
        //center image into div
//        var img = $get(this._button.id + "_img");
//        img.style.marginTop = Math.floor( (this._button.offsetHeight - document.images[img.id].height) / 2 ) + 'px'; 
//        img = null;
              
        $addHandler(this._button, 'click', this._button_onclick$delegate);
        
    }
    
    ,dispose : function() {
        /// <summary>
        /// Dispose the behavior
        /// </summary>    

        $removeHandler(this._button, 'click', this._button_onclick$delegate);
        this._button_onclick$delegate = null;
        
        this._owner = null;
        this._index = null;
        this._active = null;
        this._enabled = null;
        this._button = null;
        this._panelText = null;
      
        AjaxControlToolkit.SidePanel.callBaseMethod(this, 'dispose');
    }   
    
    ,_button_onclick : function(event) {
        if ( !this._enabled ) return;
        this.get_owner().set_activePanel(this);  
    }
        
    ,get_owner : function() {
        return this._owner;
    }
    ,set_owner : function(value) {
        if (this._owner != value) {
            this._owner = value;
            this.raisePropertyChanged("owner");
        }
    }  
    
    ,get_button : function() {
        return this._button;
    }
    ,set_button: function(value) {
        if (this._button != value) {
            this._button = value;
            this.raisePropertyChanged("button");
        }
    }
    
    ,get_panelText : function() {
        return this._panelText;
    }
    ,set_panelText: function(value) {
        if (this._panelText != value) {
            this._panelText = value;
            this.raisePropertyChanged("showText");
        }
    } 
        
    ,_get_active : function() { 
        return this._active; 
    }
    ,_set_active : function(value, visible) { 
        this._active = value;
        if (value) {
            this._activate(); 
            this._show();
        } else {
            this._deactivate();
            this._hide();
        }
    }
       
    ,_activate :function() {
        Sys.UI.DomElement.addCssClass(this._button, "ajax__sidebar_button_active");
    }
    ,_deactivate:function() {
        Sys.UI.DomElement.removeCssClass(this._button, "ajax__sidebar_button_active");    
    }
      
    ,_show : function() {
        var e = this.get_element();
        $common.setVisible(e, true);
    } 
    ,_hide : function() {
        var e = this.get_element();
        $common.setVisible(e, false);
    }
}    

AjaxControlToolkit.SidePanel.registerClass('AjaxControlToolkit.SidePanel', Sys.UI.Control);

